<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>用户注册时间分析</span>
          </div>
        </template>
        <div id="userTypeCharts" style="height: 300px;"></div>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="24">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>用户性别分析</span>
          </div>
        </template>
        <div id="userSexCharts" style="height: 300px;"></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';

onMounted(async () => {
  const {data} = await axios.get('/api/userAnalysis');
  if (data && data.userType) {
    initUserTypeCharts(data.userType);
  }
  if (data&&data.userSex){
    initUserSexCharts(data.userSex);
  }
});

// 数据处理函数
const prepareUserTypeData = (data) => {
  // 初始化12个月的数据为0
  let userTypeData = new Array(12).fill(0);

  if (data && Array.isArray(data)) {
    data.forEach(item => {
      if (item.zcsj) {
        // 从日期中提取月份
        const month = parseInt(item.zcsj.split('-')[1]);
        // 确保月份有效并设置数据
        if (month >= 1 && month <= 12) {
          userTypeData[month - 1] = parseInt(item.count) || 0;
        }
      }
    });
  }
  return userTypeData;
}

const initUserTypeCharts = (userTypeData) => {
  const chartDom = document.getElementById('userTypeCharts');
  if (!chartDom) return;

  // 处理数据
  const processedData = prepareUserTypeData(userTypeData);

  // 初始化echarts实例
  const myChart = echarts.init(chartDom);

  // 配置图表选项
  const option = {
    title: {
      text: '用户注册时间分析'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value',
      name: '注册人数'
    },
    series: [{
      name: '注册人数',
      type: 'bar',
      data: processedData,
      barWidth: '60%'
    }]
  };

  // 渲染图表
  myChart.setOption(option);
}
const prepareUserSexData = (data) => {
  let userSexData = new Array(2);
  data.forEach(item => {
    if (item.sex === '男') {
      userSexData[0]={value: item.count, name: '男'};
    } else if (item.sex === '女') {
      userSexData[1]={value: item.count, name: '女'};
    }
  })
  return userSexData;
}
const initUserSexCharts=(userSexData) => {
  var mySexDom = echarts.init(document.getElementById('userSexCharts'));
  const parsedData = prepareUserSexData(userSexData);
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '用户性别',
        type: 'pie',
        radius: '50%',
        data:parsedData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  mySexDom.setOption(option);
}

</script>

<style scoped>
.card-header {
  font-weight: bold;
  font-size: 16px;
}
</style>
